<template>
    <div style="margin-top: 20px;">
        <el-row>
            <el-col span="6">
                <!--个人信息-->
                <el-col id="box" style="height: 210px;">
                    <el-col span="8" style="border-radius: 5%; border:2px dashed #42b983; padding-top: 10px; padding-bottom: 20px;">
                    <el-col><el-avatar style="border: #42b983 1px solid; margin-bottom: 10px;" :src="userInfo.avatar"></el-avatar></el-col>
                    <el-col>关注{{followNum.follow}}</el-col>
                    <el-col>粉丝{{followNum.fans}}</el-col>
                    <el-col style="margin-top: 10px;">
                        <el-tooltip class="item" effect="dark" content="编辑" placement="bottom">
                            <el-button type="primary" icon="el-icon-edit" circle @click="updateBtn()"></el-button>
                        </el-tooltip>
                    </el-col>
                    </el-col>
                    <el-col span="16">
                        <el-col style="margin: 5px;">
                            <el-col span="6">📫邮箱</el-col>
                            <el-col span="18">{{userInfo.email}}</el-col>
                        </el-col>
                        <el-col style="margin: 5px;">
                            <el-col span="6">👹昵称</el-col>
                            <el-col span="18">{{userInfo.nickName}}</el-col>
                        </el-col>
                        <el-col style="margin: 5px;">
                            <el-col span="6">🎲花号</el-col>
                            <el-col span="18">{{userInfo.hhid}}</el-col>
                        </el-col>
                        <el-col style="margin: 5px;">
                            <el-col span="6">👀性别</el-col>
                            <el-col span="18">
                                <span v-show="userInfo.sex === null">未知</span>
                                <span v-show="userInfo.sex === 1">男</span>
                                <span v-show="userInfo.sex === 0">女</span>
                            </el-col>
                        </el-col>
                        <el-col style="margin: 5px;">
                            <el-col span="6">🍈简介</el-col>
                            <el-col span="18">{{userInfo.brief}}</el-col>
                        </el-col>
                        <el-col style="margin: 5px;">
                            <el-col span="6">💰积分</el-col>
                            <el-col span="18">{{userInfo.credit}}</el-col>
                        </el-col>
                    </el-col>
                </el-col>
                <el-col id="box" style="height: 390px; margin-top: 15px;">
                    <el-col span="3">
                        <div style="width: 100%; font-size: 20px; background-color: #42b983; height: 35px; padding-top: 5px; border-radius: 50% 0% 0% 0%; color: white;">订</div>
                        <div style="width: 100%; font-size: 20px; background-color: #42b983; height: 30px; color: white;">单</div>
                    </el-col>
                    <el-col span="7"><el-button plain style="width: 90%; height: 70px; margin-bottom: 10px; border: #42b983 1px solid; background-color: white;">
                        <div @click="status2()" style="font-size: 20px; margin-bottom: 8px;">🍐</div>
                        <div>已完成订单</div>
                    </el-button></el-col>
                    <el-col span="7"><el-button @click="status1()" plain style="width: 90%; height: 70px; margin-bottom: 10px; border: #42b983 1px solid;">
                        <div style="font-size: 20px; margin-bottom: 8px;">🍋</div>
                        <div>待支付订单</div>
                    </el-button></el-col>
                    <el-col span="7"><el-button plain style="width: 90%; height: 70px; margin-bottom: 10px; border: #42b983 1px solid;">
                        <div @click="status0()" style="font-size: 20px; margin-bottom: 8px;">🍓</div>
                        <div>失效的订单</div>
                    </el-button></el-col>
                    <el-col style="border: #42b983 1px dashed; height: 280px;">
                        <div style="height: 240px;">
                            <div v-for="item in orderList" :key="item.id">
                                <el-col style="border: #42b983 1px solid; width: 96%; margin-left: 2%; margin-top: 8px; height: 70px;">
                                    <img @click="openOrder = true; order = item" style="height: 60px; width: 60px; border-radius: 10px; margin-top: 4px; float: left; margin-left: 5px; margin-right: 5px;" fit="contain" :src="item.pic">
                                    <div @click="openOrder = true; order = item" style="height:60px; width: 230px; float: left; margin-top: 4px; text-align: left;">
                                        <el-tag effect="plain" v-show="status == 0" type="success">已失效</el-tag>
                                        <el-tag effect="plain" v-show="status == 1" type="success">待支付</el-tag>
                                        <el-tag effect="plain" v-show="status == 2" type="success">已完成</el-tag>
                                        {{item.goodsName}}
                                    </div>
                                    <el-button @click="convert(item.id)" v-show="status == 1" type="primary" style="width: 34px; height:60px; margin-top:4px; margin-right: 5px; float: right; padding:0">兑<br>换</el-button>
                                </el-col>
                            </div>                      
                        </div>
                        <div>
                            <el-pagination background layout="prev, pager, next" :page-size="Orderlimit" :total="Ordertotal" :current-page="Orderpage" @current-change="changeOrderPage"></el-pagination>
                        </div>
                    </el-col>
                </el-col>
            </el-col>
            <el-col span="18">
                <el-col id="box" style="margin-left:15px; width: 100%; height: 615px;"> 
                    <div style="margin-top:20px">                      
                        <el-form :inline="true" class="demo-form-inline">
                        <el-button type="primary" @click="addPostBth()" style="margin-right:50px" icon="el-icon-circle-plus-outline">写贴子</el-button> 
                        <el-form-item label="🍅标题/🥝内容">
                            <el-input v-model="searchObj.text" placeholder="帖子的标题/内容"/> 
                        </el-form-item>
                        <el-form-item label="🍇类别">
                            <el-select v-model="searchObj.type" placeholder="请选择类型">
                                <el-option
                                v-for="type in typeList"
                                :key="type.id"
                                
                                :label="type.typeName"
                                :value="type.id"
                                ></el-option>
                            </el-select>
                        </el-form-item>
                        <!--这个单选框↑，使用完v-for要空一行，要不的话会有红色的>，然后下面的代码都加粗了，不知道为什么-->
                        <el-button type="primary" icon="el-icon-search" @click="getMyPost()">查询</el-button>
                        <el-button type="default" @click="resetData()">清空</el-button>
                        </el-form>
                    </div>
                    <div v-for="item in postList" :key="item.id" id="goodsCard" style="width:33%; float: left;">
                    <el-card el-card :body-style="{ padding: '0px' }" style="margin: 5px; height: 440px; border:2px dashed #42b983; height: 420px; margin-bottom: 20px;">
                        <div style="padding-left: 10px; padding-right: 20px; padding-top: 5px;">
                            <el-button v-if="!item.isLike" round @click="like(item.id)">(●TAT●){{ item.liked }}</el-button>
                            <el-button v-if="item.isLike"  round @click="like(item.id)">(●ˇ∀ˇ●){{ item.liked }}</el-button>
                            <el-tooltip class="item" effect="dark" content="删除" placement="top"><el-button @click="deleteClick(item.id)" type="danger" icon="el-icon-delete" circle style="float:right; margin-bottom: 5px;"></el-button></el-tooltip>
                            <el-tooltip class="item" effect="dark" content="编辑" placement="top"><el-button @click="editPostBtn(item.id)" type="warning" icon="el-icon-edit" circle style="float:right; margin-bottom: 5px;"></el-button></el-tooltip>
                            <el-tooltip class="item" effect="dark" content="详情" placement="top"><el-button @click="getDetails(item.id)" type="primary" icon="el-icon-info" circle style="float:right; margin-bottom: 5px;"></el-button></el-tooltip>                           
                        </div>
                        <div @click="getDetails(item)" style="position: relative; height: 375px;">
                            <img :src="item.pic" class="image">
                            <div style="padding: 14px;">
                                <div style="margin-bottom: 10px; font-size: 16px; font-weight: bold; text-align: left;">
                                    <el-tag effect="plain">{{getTypeById(item.type)}}</el-tag>
                                    {{item.title}}
                                </div>                  
                            </div>
                            <div style="font-size: smaller; color: #42b983; position: absolute; bottom: 0; right: 0;">{{ item.createTime }}</div> 
                        </div>         
                    </el-card>
                    </div>
                    <!--页码-->
                    <el-row style="margin-top: 55px;">
                        <el-col :span="24"><el-pagination background layout="prev, pager, next" :page-size="limit" :total="total" :current-page="page" @current-change="changeCurrentPage"></el-pagination></el-col>
                    </el-row>
                </el-col>
            </el-col>
        </el-row>

        <el-dialog
        :visible.sync="openOrder"
        :title="order.id"
        width="30%">
            <el-row>
                <el-col>
                    <img style="width: 100%; border-radius: 10px;" fit="contain" :src="order.pic">
                </el-col>               
                <el-col style="text-align: left; margin-bottom: 5px;">🌏订单序号 {{order.id}}</el-col>
                <el-col style="text-align: left; margin-bottom: 5px;">🍄商品名称 {{order.goodsName}}</el-col>
                <el-col style="text-align: left; margin-bottom: 5px;">🎨商品详情 {{order.details}}</el-col>
                <el-col style="text-align: left; margin-bottom: 5px;">🍚消耗积分 {{order.price}}</el-col>
                <el-col style="text-align: left; margin-bottom: 5px;">🕖创建时间 {{order.createTime}}</el-col>
                <el-col v-show="status == 0" style="text-align: left; margin-bottom: 5px;">❌订单关闭{{order.updateTime}}</el-col>
                <el-col v-show="status == 1" style="text-align: left; margin-bottom: 5px;"><el-tag>订单在创建后保留15分钟, 十五分钟后关闭, 请在订单关闭前兑换</el-tag></el-col>
                <el-col v-show="status == 2" style="text-align: left; margin-bottom: 5px;">🌈交易时间 {{order.updateTime}}</el-col>
            </el-row>
        </el-dialog>

        <el-drawer
            title="编辑用户信息"
            :visible.sync="drawer"
            with-header=true
            :before-close="handleClose">
            <div style="padding:30px">
                <el-form ref="editUser" :model="form" label-width="60px">
                    <el-form-item label="昵称">
                        <el-input v-model="editUser.nickName"></el-input>
                    </el-form-item>
                    <el-form-item label="头像">
                        <el-upload class="avatar-uploader"
                                action= "http://localhost:8333/user/userInfo/upload"
                                :show-file-list="false"
                                :on-success="handleSuccess"
                                ref="upload">
                            <img v-if="img" :src="img" class="image"/>
                            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                        </el-upload>
                    </el-form-item>
                    <el-form-item label="花花号">
                        <el-input v-model="editUser.hhid"></el-input>
                    </el-form-item>
                    <el-form-item label="性别">
                        <el-radio v-model="editUser.sex" :label="1" border>男</el-radio>
                        <el-radio v-model="editUser.sex" :label="0" border>女</el-radio>
                    </el-form-item>
                    <el-form-item label="简介">
                        <el-input v-model="editUser.brief"></el-input>
                    </el-form-item>
                    <div style="margin-top: 10px;">
                        <el-button type="primary" @click="updateSubmit">完成</el-button>
                    </div>
                </el-form>
            </div>
            </el-drawer>

            <el-drawer
            :title=editPostTitle
            :visible.sync="drawerPost"
            with-header=true
            :before-close="handleClosePost">
            <div style="padding:30px">
                <el-form ref="saveObj" :model="form" label-width="60px">
                    <el-form-item label="标题">
                        <el-input v-model="saveObj.title"></el-input>
                    </el-form-item>
                    <el-form-item label="图片">
                        <el-upload class="avatar-uploader"
                                action= "http://localhost:8333/post/postInfo/upload"
                                :show-file-list="false"
                                :on-success="handleSuccess"
                                ref="upload">
                            <img v-if="img" :src="img" class="image"/>
                            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                        </el-upload>
                    </el-form-item>
                    <el-form-item label="内容">
                        <el-input type="textarea" :rows="3" v-model="saveObj.text"></el-input>
                    </el-form-item>
                    <el-form-item label="类别">
                        <el-select v-model="saveObj.type" placeholder="请选择类别">
                            <el-option
                            v-for="type in typeList"
                            :key="type.id"

                            :label="type.typeName"
                            :value="type.id">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <div style="margin-top: 10px;">
                        <el-button type="primary" @click="saveOrUpdate()">完成</el-button>
                    </div>                    
                </el-form>
            </div>
            </el-drawer>


            <el-dialog
            :visible.sync="dialogVisible"
            width="60%"
            :before-close="handleCloseDetails">
            <el-row>
                <el-col span="11">
                    <img :src="saveObj.pic" class="image">
                </el-col>
                <el-col span="12" offset="1">
                    <div style="margin-bottom: 16px; font-size: 16px; font-weight: bold; text-align: left;">{{saveObj.title}}</div>
                    <div style="margin-bottom: 8px; text-align: left;">{{saveObj.text}}</div>
                    <div style="margin-bottom: 8px; text-align: left;">
                        <el-tag effect="plain" style="margin-right: 10px;">{{getTypeById(saveObj.type)}}</el-tag>
                        <el-button v-if="!saveObj.isLike" round @click="like(saveObj.id)">❤{{ saveObj.liked }}</el-button>
                        <el-button v-if="saveObj.isLike" type="danger" round @click="like(saveObj.id)">❤{{ saveObj.liked }}</el-button>
                    </div>
                    <div style="margin-bottom: 2px; text-align: left;">{{saveObj.createTime}}</div>
                </el-col>
            </el-row>
            <span slot="footer">
                <el-avatar :src="userInfo.avatar"></el-avatar>
                {{ userInfo.nickName }}
            </span>
            </el-dialog>

    </div>
</template>

<script>
import userInfo from '../../api/mime/userinfo';
import UserFollowApi from '../../api/mime/userFollow';
import PostInfoApi from '../../api/post/postInfo';
import PostTypeApi from '../../api/post/postType';
import ShopOrderApi from '../../api/shop/shopOrder.js';

export default {
    data() {
        return {
            userInfo: [], //用户信息列表
            editUser: {},
            drawer: false,
            drawerPost: false,
            postList: [],
            typeList: [],
            total: 0, // 总记录数
            page: 1, // 页码
            limit: 3, // 每页记录数
            searchObj: {},
            saveObj: {},
            editPostTitle: '',
            edit: false,
            dialogVisible: false, //帖子详情
            isFollow: false,
            followNum: {}, //粉丝数
            status: 2,
            orderList: [],
            Ordertotal: 0, // 总记录数
            Orderpage: 1, // 页码
            Orderlimit: 3, // 每页记录数
            openOrder: false,
            order: {},
            img:''
        }
    },
    methods: {
        handleSuccess (response, file, fileList) {
            console.log(response)
              this.saveObj.pic = `http://localhost:8333/post/postInfo/download?name=${response.data}`
              this.editUser.avatar = `http://localhost:8333/post/postInfo/download?name=${response.data}`
              this.img = this.saveObj.pic
              console.log(this.saveObj.pic)
          },
        convert(id) {
            this.$confirm('你确定要兑换吗','提示',{
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                return ShopOrderApi.submitOrder(id)
            }).then((res) => {
                if (res.data.code == 200) {
                    this.$message.success(res.data.message);
                    this.getUserInfo()
                    this.getOrderList()
                } else {
                    this.$message.error(res.data.message);
                }
            }).catch(err => {
                if (err === 'cancel') {
                    this.$message.info('取消兑换')
                } else {
                    this.$message.warning("请先登录哦 /(*≧︶≦))(￣▽￣* )ゞ")
                }
            })
        },
        status0() {
            this.Orderpage = 1
            this.orderList = []
            this.status = 0
            this.getOrderList()
        },
        status1() {
            this.Orderpage = 1
            this.orderList = []
            this.status = 1
            this.getOrderList()          
        },
        status2() {
            this.Orderpage = 1
            this.orderList = []
            this.status = 2
            this.getOrderList()
        },
        getOrderList() {
            ShopOrderApi.OrderPage(this.Orderpage, this.Orderlimit, this.status)
            .then(res => {
                this.orderList = res.data.data.records
                this.Ordertotal = res.data.data.total
            }).catch(res => {
                this.$message.warning("请先登录哦 /(*≧︶≦))(￣▽￣* )ゞ")                
            })
        },
        getPostById(id) {
            PostInfoApi.getPostById(id)
                .then(res => {
                    this.saveObj = res.data.data
                    this.img = this.saveObj.pic
            }).catch(res => {
                this.$message.warning("请先登录哦 /(*≧︶≦))(￣▽￣* )ゞ")                
            })
        },
        getisFollow(id) {
            UserFollowApi.isFollow(id)
            .then(res => {
                this.isFollow = res.data.data
                console.log("是否关注了这个人？"+ this.isFollow)
            })
        },
        getDetails(id) {
            this.dialogVisible = true
            this.getPostById(id)
            this.getisFollow(item.userId)
        },
        like(id) {
            PostInfoApi.like(id)
            .then(res => {
                if (res.data.code == 200) {
                    this.$message.success(res.data.message);
                    this.getMyPost()
                    this.getPostById(id)
                } else {
                    this.$message.error(res.data.message);
                }
            }).catch(res => {
                this.$message.warning("请先登录哦 /(*≧︶≦))(￣▽￣* )ゞ")                
            })
        },
        deleteClick(id) {
            this.$confirm('你确定要删除帖子吗','提示',{
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                return PostInfoApi.remove(id)
            }).then((res) => {
                this.getMyPost()
                this.$message.success(res.data.message)
            }).catch(err => {
                if (err === 'cancel') {
                    this.$message.info('取消删除')
                } else {
                    this.$message.warning("请先登录哦 /(*≧︶≦))(￣▽￣* )ゞ")
                }
            })  
        },
        saveOrUpdate() {
            this.$confirm('你确定要' + this.editPostTitle + '帖子吗?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
            }).then(() => {
                if (this.edit == false) {
                    this.img = ''
                    return PostInfoApi.addPost(this.saveObj)
                } else {
                    this.img = ''
                    return PostInfoApi.updatePost(this.saveObj)
                }
            }).then((res) => {
                if (res.data.code == 200) {
                    this.$message.success(res.data.message)
                    this.getMyPost()
                    this.drawerPost = false
                    this.saveObj = {}
                    this.edit = false
                } else {
                    this.$message.error(res.data.message);
                }
            }).catch(err => {
                if (err === 'cancel') {
                    this.$message.info('取消' + this.editPostTitle)
                }else {
                    this.$message.warning("请先登录哦 /(*≧︶≦))(￣▽￣* )ゞ")
                }
            })
        },
        editPostBtn(id) {
            this.edit = true,
            this.drawerPost = true
            this.editPostTitle = "编辑"
            this.getPostById(id)
        },
        addPostBth() {
            this.drawerPost = true
            this.editPostTitle = "发表"
            this.saveObj = {}                      
        },
        resetData() {
            this.searchObj = {}
            this.getMyPost()
        },
        changeOrderPage(Orderpage) {
            this.Orderpage = Orderpage
            this.getOrderList()
        },
        changeCurrentPage(page) {
            this.page = page
            this.getMyPost()
        },
        updateSubmit() {
            this.$confirm('你确定要更改用户信息吗?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                this.img = ''
                return userInfo.updateNowUser(this.editUser)
            }).then((res) => {
                if (res.data.code == 200) {
                    this.$message.success(res.data.message)
                    this.getUserInfo()
                    this.drawer = false
                    this.img = ''
                } else {
                    this.$message.error(res.data.message);
                }
            }).catch(err => {
                if (err === 'cancel') {
                    this.$message.info('取消编辑')
                } else {
                    this.$message.warning("请先登录哦 /(*≧︶≦))(￣▽￣* )ゞ")
                }
            })
        },
        updateBtn() {
            this.drawer = true;           
            userInfo.getUserById(this.userInfo.id)
            .then(res => {
                console.log("userInfo.getUserById(this.userInfo.id)")
                console.log(res)
                this.editUser = res.data.data
                this.img = this.editUser.avatar
                console.log(this.editUser)
            }).catch(res => {
                this.$message.warning("请先登录哦 /(*≧︶≦))(￣▽￣* )ゞ")                
            })
        },
        handleClosePost(done) {
            this.$confirm('确定退出？退出后信息无法保存')
          .then(_ => {
            done();
            this.saveObj = {}
            this.edit = false
          })
          .catch(_ => {});
        },
        handleClose(done) {
        this.$confirm('确定退出编辑用户信息？')
          .then(_ => {
            done();
          })
          .catch(_ => {});
        },
        getUserInfo() {
            userInfo.getNowUserWithCredit()
            .then((result) => {
                this.userInfo = result.data.data
                console.log(userInfo)
                this.getFollowNum(result.data.data.id)
                console.log(this.userInfo)
            })
        },
        getMyPost() {
            PostInfoApi.myPostPage(this.page, this.limit, this.searchObj)
            .then(res => {
                this.postList = res.data.data.records
                this.total = res.data.data.total
            }).catch(res => {
                this.$message.warning("请先登录哦 /(*≧︶≦))(￣▽￣* )ゞ")                
            })
        },
        getAllType() {
            PostTypeApi.getAllType()
            .then(res => {
                this.typeList = res.data.data
                console.log(res)
            })
        },
        getFollowNum(id) {
            UserFollowApi.followNum(id)
            .then(res => {
                this.followNum = res.data.data;
            })
        }
    },
    created() {
        this.getMyPost()
        this.getUserInfo()
        this.getAllType()
        this.getOrderList()
    },
    computed: {
        getTypeById() {
            return id => {
                const item = this.typeList.find(item => item.id === id)
                return item ? item.typeName : ''
            }
        },
    }
}

</script>

<style scoped>
.image{
    width: 100%;
    height: 324px;
}

#box {
    border:3px dashed #42b983;
    padding: 10px;
}
</style>